//分装分类数据业务相关代码
import { onMounted,ref } from 'vue'
import {onBeforeRouteUpdate} from 'vue-router'
import {useRoute} from 'vue-router'
import {getCategoryApi} from '@/apis/category'
export function useCategory(){
    //获取分类数据（传参id的数据）
    const categoryData=ref({})
    const route=useRoute()
    const getCategory=async (id=route.params.id)=>{
      const res=await getCategoryApi(id)
      console.log('categoryData',res);
      categoryData.value=res.result
    }
    onMounted(()=>getCategory())


    //目标：路由参数发生变化的时候，可以把'分类数据接口'重新发送
    //这个钩子可以精细化控制，可以避免重复请求，性能损耗
    onBeforeRouteUpdate((to)=>{
      console.log('路由变化了');
      //存在问题；使用最新的路由参数请求最新的分类数据
      console.log('最新的id数据',to);
      getCategory(to.params.id)
    })
    //函数use打头，内部封装逻辑，return组件需要用到的数据和方法给组件消费
    return {
      categoryData
    }
}

